<template>
	<div class="table-content">
		<div class="table-content-search">
			<div class="tablDataDaily-label"></div>
			<div>金额统计单位：万</div>
		</div>
		<el-table
			key="father"
			element-loading-spinner="el-icon-loading"
			border
			ref="elTable"
			size="mini"
			class="small-size-table"
			:data="tableData"
			style="width: 100%"
			:max-height="480"
			highlight-current-row
			:header-cell-style="getRowClass"
		>
			<el-table-column
				prop="venueName"
				align="center"
				label="场馆项目"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<p>
						{{ scope.row.venueName || '-' }}
					</p>
				</template>
			</el-table-column>
			<el-table-column
				prop="betAmount"
				align="center"
				label="投注金额"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<p>
						{{ handleTotalNumber('10k', scope.row.betAmount) }}
					</p>
				</template>
			</el-table-column>
			<el-table-column
				prop="validBetAmount"
				align="center"
				label="有效投注额"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<p>
						{{ handleTotalNumber('10k', scope.row.validBetAmount) }}
					</p>
				</template>
			</el-table-column>
			<el-table-column
				prop="betMemberNum"
				align="center"
				label="投注人数"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ scope.row.betMemberNum || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				prop="betCount"
				align="center"
				label="注单量"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ scope.row.betCount || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				prop="venueNetAmount"
				align="center"
				label="场馆输赢"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<p :style="handleNumberColor(scope.row.venueNetAmount)">
						{{
							handleTotalNumber(
								'10k',
								scope.row.venueNetAmount,
								0,
								true,
								true
							)
						}}
					</p>
				</template>
			</el-table-column>
			<el-table-column
				prop="netRate"
				align="center"
				label="盈利率"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<p>
						{{ scope.row.netRate + '%' }}
					</p>
				</template>
			</el-table-column>
		</el-table>
		<div style="display: flex;width: 100%;">
			<div class="table-content">
				<div class="table-content-chart" id="main3"></div>
			</div>
			<div class="table-content">
				<div class="table-content-chart" id="main4"></div>
			</div>
		</div>
	</div>
</template>

<script>
import list from '@/mixins/list'
import summaryList from './summaryList'
import dayjs from 'dayjs'
import * as echarts from 'echarts'
export default {
	mixins: [list, summaryList],
	props: {
		merchantId: {
			type: String,
			default: null
		},
		dateValue: {
			type: Object,
			default: null
		}
	},
	data() {
		return {
			tableData: [],
			totalSummary: '',
			staticsDateList: [],
			netRateList: [],
			venueNetAmountList: []
		}
	},
	mounted() {},
	methods: {
		loadData() {
			let params = {
				...this.queryData,
				startTime: dayjs(this.dateValue)
					.startOf('day')
					.format('YYYY-MM-DD'),
				endTime: dayjs(this.dateValue)
					.endOf('day')
					.format('YYYY-MM-DD'),
				merchantId: this.merchantId
			}
			params = this.getParams(params)
			this.tableData = []
			this.loading = true
			this.pageCurrency = this.merchantObj?.currency || ''
			this.$api
				.getVenueNetAmountDayPage(params)
				.then((res) => {
					this.loading = false
					this.axiosDate = +new Date()
					this.tableData = res?.data || []
					this.staticsDateList = []
					this.netRateList = []
					this.venueNetAmountList = []
					for (const index in this.tableData) {
						const e = this.tableData[index]
						this.staticsDateList.push(e.venueName)
						const data = {
							value: e.validBetAmount,
							name: e.venueName,
							itemStyle: { color: this.colorSwitch(index) }
						}
						const data2 = {
							value: e.venueNetAmount,
							itemStyle: { color: this.colorSwitch(index) }
						}
						this.netRateList.push(data)
						this.venueNetAmountList.push(data2)
					}
					this.initChart()
					this.initChart1()
				})
				.catch(() => {
					this.loading = false
				})
		},
		colorSwitch(index) {
			const colorList = [
				'#81d3f8',
				'#f59a23',
				'#ec808d',
				'#caf982',
				'#ffff80',
				'#80ffff',
				'#f59a23',
				'#81d3f8'
			]
			return colorList[index]
		},
		getRowClass({ row, column, rowIndex, columnIndex }) {
			if (rowIndex === 0 && this.headerStyle !== 2) {
				return 'background:#EFEFEF'
			} else {
				return ''
			}
		},
		initChart() {
			// 获取图表容器
			var chartDom = document.getElementById('main3')
			// 初始化图表
			var myChart = echarts.init(chartDom)

			// 配置项
			var option = {
				title: {
					text: '有效投注额',
					left: 'center'
				},
				tooltip: {
					trigger: 'item',
					formatter: '{b}:{d}%'
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '8%',
					containLabel: true
				},
				toolbox: {
					feature: {
						saveAsImage: {}
					}
				},
				legend: {
					data: this.staticsDateList, // 数据系列的文本描述
					bottom: 0 // 设置 legend 在底部
				},
				xAxis: {
					type: 'category',
					boundaryGap: false
				},
				yAxis: {
					type: 'value'
				},
				label: {
					formatter: '{b}: {d}%'
				},
				series: {
					name: 'Access From',
					type: 'pie',
					radius: '50%',
					data: this.netRateList // validBet.value
				}
			}

			// 设置图表配置项
			option && myChart.setOption(option)
		},
		initChart1() {
			// 获取图表容器
			var chartDom = document.getElementById('main4')
			// 初始化图表
			var myChart = echarts.init(chartDom)

			// 配置项
			var option = {
				xAxis: {
					type: 'category',
					data: this.staticsDateList
				},
				title: {
					text: '场馆输赢',
					left: 'center'
				},
				yAxis: {
					type: 'value'
				},
				label: {
					show: true,
					position: 'top',
					formatter: '${c}' // {c} 表示当前数据项的值
				},
				series: [
					{
						barWidth: '30px',
						data: this.venueNetAmountList.map((item) => ({
							...item,
							value: this.currencyTo10k(item.value)
						})), // winVenue.value
						type: 'bar'
					}
				]
			}
			// 设置图表配置项
			option && myChart.setOption(option)
		}
	}
}
</script>

<style lang="scss" scoped>
.table-content {
	margin-top: 20px;
	width: 100%;
	margin-left: 2px;
	box-sizing: border-box;
	.label {
		font-size: 26px;
		font-weight: bold;
		padding-left: 10px;
		margin-bottom: 20px;
	}
	.table-content-chart {
		height: 400px;
		border: 1px solid #ebeef5;
		padding-top: 15px;
	}
	.table-content-search {
		width: auto;
		height: 60px;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		padding-bottom: 10px;
		font-size: 13px;
		.tablDataDaily-label {
			float: left;
			font-size: 26px;
			font-weight: bold;
			padding-left: 10px;
			margin-top: 12px;
		}

		.search-slot {
			float: left;
			margin-bottom: 10px;
		}
	}
}
</style>
